﻿@using System.Linq
@using CML.Intercamber.Business
@using CML.Intercamber.Web.Helpers

@{
    ViewBag.PageTitle = Resources.Intercamber.SearchContacts_PageName;
    Users user = ViewBag.ConnectedUser;
}
@section PageHead
{
    <script type="text/javascript" src="~/Scripts/Intercamber.hobbiesSelector.js"></script>
    <script type="text/javascript">

        // grid renderers
        function gridColumnAdd(cellvalue, options, rowobject) {
            return "<img id=\"add" + cellvalue + "\" class='imgButton' src='/Images/AddContact.png' onclick=\"contactAdder.formAddContact('" + cellvalue + "', '" + rowobject.Name.replace("\"", "").replace("'", "") + "')\" />";
        }

        // workflow management 
        var currentStep = 1;
        var totalSteps = 3;

        var stepManager = new function() {
            this.validateStep = function() {
                this.initNextStep();
            };

            this.initNextStep = function() {
                $("#numStep" + currentStep).css("background-image", "url('/Images/Workflow/BubbleCheck.png')");
                $("#numStep" + currentStep).html("");
                if (currentStep < totalSteps)
                    $("#linkStep" + currentStep).css("background-image", "url('/Images/Workflow/LinkCheck.png')");
                $("#contentStep" + currentStep).hide();
                currentStep++;
                $("#contentStep" + currentStep).show();
                $(".stepSelected").removeClass("stepSelected");
                $("#step" + currentStep).addClass("stepSelected");
                if (currentStep == totalSteps)
                    $("#buttonValidate").hide();
                else
                    $("#buttonValidate").show();
                if(currentStep > 1)
                    $("#buttonBack").show();
                else
                    $("#buttonBack").hide();
                if (currentStep == totalSteps) {
                    // load grid
                    var req = '/Contact/SearchData?country=' + $("#ddlCountry").val() + '&language=' + $("#ddlLanguage").val() + "&name=" + $("#tbName").val();
                    var ageDiff = $("#ageSlider").slider("value");
                    if (ageDiff == 0) // unit years
                        ageDiff = 0.5;
                    if (ageDiff == 1)
                        ageDiff = 1;
                    if (ageDiff == 2)
                        ageDiff = 2;
                    if (ageDiff == 3)
                        ageDiff = 0;
                    req += "&ageDiff=" + ageDiff + "&hobbies=[";
                    var hobbiesVal = $(".hobbySelVal");
                    for (var i = 0; i < hobbiesVal.length; i++)
                        req += (i > 0 ? "'" : ",'") + $(hobbiesVal[i]).val() + "'";
                    req += "]";
                    $("#gridContact").jqGrid()
                        .setGridParam({
                            datatype: 'json',
                            url: req
                        })
                        .trigger("reloadGrid", [{ page: 1 }]);
                }
            };

            this.initFirstStep = function initFirstStep() {
                currentStep = 1;
                $(".contentStep").hide();
                $("#contentStep1").show();
                $(".stepLink").css("background-image", "url(/Images/Workflow/Link.png)");
                $(".stepNumber").each(function() {
                    var numStep = this.id.replace("numStep", "");
                    var dt = $(this);
                    dt.html(numStep);
                    dt.css("background-image", "url(/Images/Workflow/Bubble.png)");
                });
                $(".stepSelected").removeClass("stepSelected");
                $("#step1").addClass("stepSelected");
                $("#buttonValidate").show();
                $("#buttonBack").hide();
            };

            this.goToStep = function(stepNum) {
                if (stepNum >= currentStep)
                    return;
                this.initFirstStep();
                for (var i = 2; i <= totalSteps && i <= stepNum; i++)
                    this.initNextStep();
            };
        };

        // popup add contact management 
        var contactAdder = new function() {
            var ttAdd = null, ttAddTitle = "";
            var currentIdUser = null, currentUserName = "";

            this.formAddContact = function(idUser, userName) {
                currentIdUser = idUser;
                currentUserName = userName;
                ttAddTitle = "@Resources.Intercamber.SearchContacts_SendRequestTo " + userName;
                if (ttAdd == null) {
                    ttAdd = $('<div />');
                    ttAdd.qtip({
                        show: {
                            effect: false,
                            modal: { on: true, blur: false }
                        },
                        content: $('#ttAdd'),
                        position: { my: 'center', at: 'center', target: $(window), viewport: $(window), adjust: { method: "shift", x: 0, y: 0 }, effect: false },
                        events: {
                            show: function() {
                                $(this).draggable();
                                $(this).qtip('option', { 'content.title': ttAddTitle, 'content.title.button': 'true' });
                            },
                            hide: function() {
                                $(this).qtip('option', { 'position.my': 'top left', 'position.target': [$(this).offset().left, $(this).offset().top] });
                            }
                        },
                        hide: false,
                        style: { classes: "qtip-bootstrap qtip-rounded tipWidth", tip: false }
                    });
                } else {
                    try {
                        ttAdd.qtip('option', 'content.title', ttAddTitle);
                    } catch(err) {
                    }
                }
                $("#addContactMessage").val("");
                ttAdd.qtip('show');
            };

            this.sendContactRequest = function() {
                var message = $("#addContactMessage").val();
                $.ajax({
                    type: "POST",
                    url: "/Contact/AskContact",
                    contentType: "application/json; charset=utf-8",
                    data: "{'idUser':\"" + currentIdUser + "\", 'message': \"" + message + "\"}",
                    dataType: "json",
                    success: function(result) {
                        if (result == true) {
                            alert("@Resources.Intercamber.SearchContacts_RequestSentTo " + currentUserName);
                            ttAdd.qtip('hide');
                            $("#add" + currentIdUser).hide();
                        } else {
                            alert("@Resources.Intercamber.SearchContacts_RequestSentError");
                        }
                    },
                    error: function(result) {
                        debugger;
                    }
                });
            };

            this.hideTooltip = function() {
                ttAdd.qtip('hide');
            };
        };

        // js data
        var listHobbies = @Html.Raw(Json.Encode(user.UsersHobbies.Select(x => new {x.CodeHobby, LabelHobby = Resources.Intercamber.ResourceManager.GetString(((List<Hobbies>) ViewBag.AllHobbies).FirstOrDefault(y => y.CodeHobby == x.CodeHobby).LblHobby), x.Description}).ToList()));

        // texts 
        var ageSliderTexts = ["@Resources.Intercamber.SearchContacts_AgeDiff6Month", "@Resources.Intercamber.SearchContacts_AgeDiff1Year", "@Resources.Intercamber.SearchContacts_AgeDiff2Years", "@Resources.Intercamber.SearchContacts_AgeDiffNoFilter"];
        
        // js load 
        $(function() {
            $(".jqbutton").button();
            $("select").chosen();
            hobbiesManager.init(false, {comment: "@Resources.Intercamber.Profil_HobbyComment"});

            $("#ageSlider").slider({
                value: 3,
                min: 0,
                max: 3,
                step: 1,
                slide: function(event, ui) {
                    $("#ageSliderLabel").html(ageSliderTexts[ui.value]);
                }
            });
            $("#ageSliderLabel").html(ageSliderTexts[3]);
        });

    </script>

    <style>
        .ui-slider {
            width:200px !important;
            margin-top:8px;
            margin-left:5px;
        }
        .tipWidth
        {
            width: 400px;
            max-width: 400px;
            min-width: 400px;
        }

        #gview_basic
        {
            position: relative;
            z-index: 1;
        }

        .stepItem
        {
            width: 250px;
            height: 60px;
            line-height: 70px;
            border: 1px solid #E5E5E5;
            display: inline-block;
            margin-top: 55px;
            text-align: center;
            background-color: white;
        }

        .stepNumber
        {
            width: 250px;
            height: 60px;
            line-height: 60px;
            display: block;
            position: absolute;
            background-image: url(/Images/Workflow/Bubble.png);
            background-position: center;
            background-repeat: no-repeat;
            width: 250px;
            text-align: center;
            vertical-align: middle;
            margin-top: -30px;
        }

        .fixStepText
        {
            margin-top: -100px;
        }

        .stepLink
        {
            width: 250px;
            height: 82px;
            display: block;
            position: absolute;
            background-image: url(/Images/Workflow/Link.png);
            background-position: center;
            background-repeat: no-repeat;
            margin-top: -70px;
            margin-left: 130px;
        }

        .stepSelected
        {
            background-color: #DEECF8;
        }
        .contentStep {
            text-align: center;
        }
        #ddlLanguage_chosen {
            font-size: 16px;
            margin-top: -8px;
        }
    </style>
    @Html.Partial("~/Views/Shared/_ProfilViewerPartial.cshtml")
}
@section PageLeftBar {
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}
@section PageContent {

    <br />
    <div style="width: 100%; text-align: center;">
        <span id="wfl" style="display: block; height: 100px; vertical-align: bottom;">
            <span class="stepItem stepSelected ui-corner-all" id="step1">
                <div class="stepNumber" id="numStep1">1</div>
                <div class="stepLink" id="linkStep1"></div>
                <a onclick="stepManager.goToStep(1); return false;" class="fixStepText">@Resources.Intercamber.SearchContacts_Step1</a>
            </span>
            <div class="stepItem ui-corner-all" id="step2">
                <div class="stepNumber" id="numStep2">2</div>
                <div class="stepLink" id="linkStep2"></div>
                <a onclick="stepManager.goToStep(2); return false;" class="fixStepText">@Resources.Intercamber.SearchContacts_Step2</a>
            </div>
            <div class="stepItem ui-corner-all" id="step3">
                <div class="stepNumber" id="numStep3">3</div>
                <span class="fixStepText">@Resources.Intercamber.SearchContacts_Step3</span>
            </div>
        </span>
    </div>
    <br />
    <br />

    <div id="contentStep1" class="contentStep">
        <span class="innerTitle ui-corner-all">
            @Resources.Intercamber.SearchContacts_LookingForPenpal
        </span>
        <br/>
        <br/>
        <label style="font-size:20px;">
            @Resources.Intercamber.SearchContacts_SelectContactLanguage
        </label>
        <select id="ddlLanguage" style="width:110px">
            @foreach (Languages l in ViewBag.ContactLanguages)
            {
                <text><option value="@l.IdLanguage">@ResourcesHelper.GetString("Languages_" + l.IdLanguage)</option></text>
            }
        </select>
        <br/>
        <br/>
        <div style="display: none;">
            @Resources.Intercamber.SearchContacts_SelectContactCountry
            <select id="ddlCountry">
                <option value="" selected>@Resources.Intercamber.ListAllCountries</option>
                @foreach (Countries c in ViewBag.ContactCountries)
                {
                    <text><option value="@c.IdCountry" @(c.IdCountry == ViewBag.PreferedCountry ? " " : "")>@ResourcesHelper.GetString("Countries_" + c.IdCountry)</option></text>
                }
            </select>
        </div>
        
    </div>

    <div id="contentStep2" style="display: none;" class="contentStep">
        @Resources.Intercamber.SearchContacts_SearchByName
        <input type="text" id="tbName" class="ui-widget-content" style="width: 400px" />
        <br/>
        <br/>
        <div>
            @Resources.Intercamber.SearchContacts_AgeDifference: <label id="ageSliderLabel"></label>
        </div>
        <div id="ageSlider" style="margin-left:300px"></div>
        <br/>
        @Resources.Intercamber.SearchContacts_SelectContactHobbies
        <br />
        <div style="text-align: center">
            <div>
                <span id="hobbiesDDL" >
                </span>
                <span>
                    <button id="btnAddHobbies" class="jqbutton">@Resources.Intercamber.Add</button>
                </span>
            </div>
            <table id="hobbiesList" cellpadding=2 style="display:inline-block"></table>
        </div>
    </div>

    <div id="contentStep3" style="display: none; width: 96%;" class="contentStep">
        @Resources.Intercamber.SearchContacts_ProposedPenpals
        <br />
        <br />
        @Html.Partial("~/Views/Shared/_TableContactsPartial.cshtml", null, new ViewDataDictionary
        {
            { "GridName", "gridContact" }, 
            { "GridUrl", "/Contact/SearchData" }, 
            { "ColumnAddContact", "gridColumnAdd"}, 
            {
                "CustomColumns", 
                @"{name: 'IdUser', fixed: true, formatter: gridColumnAdd, label: '" + Resources.Intercamber.SearchContacts_ColAdd + @"',  resizable: false, sortable: false, width: 40, index: 'IdUser', align: 'center' }, "
            },
        })
    </div>

    <div id="ttAdd" style="display: none">
        @Resources.Intercamber.SearchContacts_YourMessage:<br />
        <textarea id="addContactMessage" style="border:1px solid lightgray;" rows="5"></textarea>
        <br />
        <div class="ttButtons">
            <button class="jqbutton" onclick="contactAdder.sendContactRequest(); return false;">@Resources.Intercamber.SearchContacts_SendRequest</button>
            &nbsp;
            <button class="jqbutton" onclick="contactAdder.hideTooltip(); return false;">@Resources.Intercamber.Cancel</button>
        </div>
    </div>
    <br />
    <div style="width:100%; text-align:center;">
        <button onclick="stepManager.goToStep(currentStep - 1);" style="display:none;" class="jqbutton" id="buttonBack">
            <img src="~/Images/Back.png" style="position: relative; margin: 0 8px 4px 0;" />
            @Resources.Intercamber.Back
        </button>
        <button onclick="stepManager.validateStep()"  class="jqbutton" id="buttonValidate">
            <img src="~/Images/Check.png" style="position: relative; margin: 0 8px 4px 0;" />
            @Resources.Intercamber.Next
        </button>
    </div>
}
